<template>
	<view class="container">
		<!-- 顶部天气和 logo -->
		<view class="header">
			<image class="logo" src="@/static/logo.png" @tap="onCardClick()" />
			<view class="weather">
				<view class="temp">
					<text class="tem-day">{{ weather.tem }}</text>
					<view class="right-info">
						<text class="unit">/ {{ weather.tem_night }}℃</text>
						<text class="desc">{{ weather.wea }}</text>
					</view>
				</view>
			</view>

		</view>


		<!-- 我的露营车 -->
		<view class="section section_top">
			<view class="section-title my_title">我的露营车：{{ campers.length }}</view>
			<view class="card-row">
				<view v-for="(camper, index) in campers" :key="index" class="card" @tap="showCamperHotspot(camper)"
					@longpress="deleteCamper(index)">
					<image class="card-img" src="@/static/cart.png" />
					<view class="card-text">
						<text>{{ camper.name }}</text>
						<text class="sub"> / 型号: {{ camper.model }}</text>
					</view>
				</view>

				<view class="card add-card-text" @tap="scanQRCode">
					<image class="add-icon-text" src="@/static/add.png" />
					<text>添加新露营车</text>
				</view>
			</view>
		</view>

		<!-- 其他产品 -->
		<view class="section">
			<view class="section-title other_title">其它产品</view>
			<view class="card-row-other">
				<view class="card-other">
					<image class="card-other-img" src="/static/1.jpg" @tap="onCardClick()" />
					<!-- <view class="card-text">
						<text>观猎10号</text><text class="sub"> / 智能越野</text>
					</view> -->
				</view>
				<view class="card-other">
					<image class="card-other-img" src="/static/2.jpg" @tap="onCardClick()" />
					<!-- <view class="card-text">
						<text>观猎11号</text><text class="sub"> / 旅行购物</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 查看更多按钮 -->
		<!-- <view class="more-btn" @tap="showHotspot = true">创建热点</view> -->

		<!-- 底部导航 -->
		<view class="tabbar">
			<view class="tab-item active">
				<image src="@/static/icon-home-active.png" class="icon" />
				<text>观猎</text>
			</view>
			<view class="tab-item" @tap="toMy()">
				<image src="@/static/icon-control.png" class="icon" />
				<text>控制</text>
			</view>
		</view>
		<!-- 等待露营车连接 -->
		<view v-if="isConnecting" class="loading-overlay">
			<view class="loading-box">
				<view class="spinner"></view>
				<text class="loading-text">等待露营车连接中...</text>
			</view>
		</view>


		<!-- 热点弹窗 -->
		<view v-if="showHotspot" class="modal">
			<view class="modal-content">
				<view class="modal-title">创建手机热点连接设备</view>
				<view class="info">
					<text>WIFI名称：</text>
					<view class="info-box">
						<text>{{ wifiName }}</text>
						<image src="@/static/copy.png" class="copy-icon" @tap="copyText(wifiName)" />
					</view>
				</view>
				<view class="info">
					<text>WIFI密码：</text>
					<view class="info-box">
						<text>{{ wifiPassword }}</text>
						<image src="@/static/copy.png" class="copy-icon" @tap="copyText(wifiPassword)" />
					</view>
				</view>
				<view class="modal-tip">
					如果无法自动创建热点，请将上面热点的信息复制到手机热点设置，手动进行热点创建，设备连接成功后即可开始控制。
				</view>
				<view class="modal-buttons">
					<button class="btn cancel" @tap="showHotspot = false">关闭</button>
					<button class="btn confirm" @tap="createHotspot">创建热点</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const FvvUniWifiHelper = uni.requireNativePlugin("Fvv-UniWifiHelper");

	export default {
		name: 'IndexPage',
		data() {
			return {
				showHotspot: false, //热点弹窗
				wifiName: '', //wifi名称
				heartbeatInProgress: false,
				wifiPassword: '', //wifi密码
				campers: uni.getStorageSync('campers') || [], //露营车本地信息
				selectedCamper: null, // 区别是添加露营车还是点击已有露营车
				isConnecting: false, //控制wifi连接中样式
				shouldCheckWifi: false, // 标志：是否应该开始检测连接
				weather: {
					tem: '',
					tem_night: '',
					wea: ''
				},
			}
		},
		onLoad() {
			this.getWeather();
		},
		onShow() {
			if (this.shouldCheckWifi) {
				this.startWifiCheck();
			}
		},
		methods: {
			onCardClick() {
				let url = 'https://shop677230g95aq81.1688.com/'
				// 检查是否是安卓平台
				if (uni.getSystemInfoSync().platform === 'android') {
					// 使用 plus.runtime.openURL 打开外部链接
					plus.runtime.openURL(url, () => {
						console.log('页面打开成功');
					}, () => {
						console.log('页面打开失败');
					});
				} else {
					// 如果不是安卓平台，可以使用其他方式打开链接
					console.log('当前平台不支持 plus.runtime.openURL');
					window.location.href = url
				}
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			//获取天气
			async getWeather() {
				console.log("获取天气");
				try {
					const res = await uni.request({
						url: 'https://v1.yiketianqi.com/free/day',
						method: 'GET',
						data: {
							appid: '77323645',
							appsecret: 'LcHe9bl4',
							unescape: 1
						}
					});
					console.log(res);
					if (res.statusCode === 200) {
						const data = res.data;
						this.weather = {
							tem: data.tem,
							tem_night: data.tem_night,
							wea: data.wea
						};
					}
				} catch (e) {
					console.error('天气获取失败', e);
				}
			},
			// 创建热点
			createHotspot() {
				this.showHotspot = false;

				if (this.selectedCamper) {
					// 是点击已有露营车，只展示热点，不创建新露营车
					this.selectedCamper = null;
					//创建热点
					this.createWifiByScan(this.wifiName, this.wifiPassword);
					// 存储当前正在创建的热点信息
					uni.setStorageSync('currentHotspot', {
						wifiName: this.wifiName,
						wifiPassword: this.wifiPassword
					});
					return;
				}

				// 将扫描二维码的露营车存本地
				// 提取所有已有编号
				const numbers = this.campers.map(camper => {
					const match = camper.name.match(/观猎(\d+)号/);
					return match ? parseInt(match[1], 10) : 0;
				});
				const maxNum = numbers.length ? Math.max(...numbers) : 0;
				const newIndex = maxNum + 1;

				const name = `观猎${newIndex}号`;
				const model = this.wifiName.split('_')[1] || this.wifiName;
				// const model = 'fe008';

				const wifiStatus = 0; // 默认wifi未连接

				this.campers.push({
					name,
					model,
					wifiStatus,
					wifiName: this.wifiName,
					wifiPassword: this.wifiPassword,
					// 默认状态字段
					modeA: 0, // 默认模式 1高速  2轻载 4户外 
					modeB: 0, // 默认模式 3巡航  5助力
					brakeStatus: false, // 刹车状态（false=未刹车）
					lightStatus: false, // 灯光状态
					routerStatus: false, // 路由器状态
					hornStatus: false, // 喇叭状态
					autoFollowStatus: false, // 自动跟随状态
					oneKeyRecallStatus: false, // 一键召回状态

					// 默认数值
					batteryPercent: 0, // 电量百分比
					speed: 0, // 当前速度
					batteryCapacity: 0, // 电池容量（单位根据需求，如mAh）
					currentMileage: 0, // 当前里程
					totalMileage: 0 // 总里程
				});
				uni.setStorageSync('campers', this.campers);
				console.log('更新后的露营车信息:', this.campers);
				//创建热点
				this.createWifiByScan(this.wifiName, this.wifiPassword);
				// 存储当前正在创建的热点信息
				uni.setStorageSync('currentHotspot', {
					wifiName: this.wifiName,
					wifiPassword: this.wifiPassword
				});
			},
			//删除露营车信息
			deleteCamper(index) {
				uni.showModal({
					title: '删除确认',
					content: '确定要删除该露营车吗？',
					success: (res) => {
						if (res.confirm) {
							this.campers.splice(index, 1);
							uni.setStorageSync('campers', this.campers);
						}
					}
				});
			},
			// 打开热点创建弹窗
			showCamperHotspot(camper) {
				this.selectedCamper = camper; // 标记来源
				this.wifiName = camper.wifiName;
				this.wifiPassword = camper.wifiPassword;
				this.showHotspot = true;
			},
			// 扫描wifi信息二维码
			scanQRCode() {
				uni.scanCode({
					success: (res) => {
						let resultStr = res.result.replace(/“/g, '"').replace(/”/g, '"');
						const ssidMatch = resultStr.match(/S:"(.*?)"/);
						const passwordMatch = resultStr.match(/P:"(.*?)"/);
						if (ssidMatch && passwordMatch) {
							this.selectedCamper = null; // 清除选中项，表示要创建新的
							this.wifiName = ssidMatch[1];
							this.wifiPassword = passwordMatch[1];
							this.showHotspot = true;
						} else {
							uni.showToast({
								title: '解析失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						});
					}
				});
			},
			//创建热点
			createWifiByScan(ssid, password) {
				const status = uni.getStorageSync('currentConnectionStatus');
				if (status === 1) {
					// 已经有设备连接
					uni.showToast({
						title: '已有设备已连接',
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						this.toMy();
					}, 2050);
					return; // 不再继续创建
				}
				getApp().globalData.shouldSendHeartbeat = true; //点击创建热点，开始发送心跳
				this.init();
				this.isConnecting = true; // 显示加载状态
				console.log("创建wifi");
				console.log(this.shouldCheckWifi);

				FvvUniWifiHelper.createWifi({
					name: ssid,
					password: password
				}, res => {
					console.log('创建热点结果:', res);
					// 设置标志位，在 onShow 时触发倒计时检测
					this.shouldCheckWifi = true;
				});
			},
			//设备是否连接检测 
			startWifiCheck() {
				// 防止重复定时器
				if (this.checkIntervalId) clearInterval(this.checkIntervalId);
				if (this.timeoutId) clearTimeout(this.timeoutId);
				if (this.heartbeatIntervalId) clearInterval(this.heartbeatIntervalId);
				if (this.heartbeatTimeoutId) clearTimeout(this.heartbeatTimeoutId);

				let checkCount = 0;
				const maxChecks = 10;
				const intervalTime = 2000;
				console.log("开始局域网扫描...");

				this.checkIntervalId = setInterval(() => {
					this.getLAN(ip => {
						if (ip) {
							clearInterval(this.checkIntervalId);
							clearTimeout(this.timeoutId);
							console.log('IP检测成功:', ip);

							// 开始心跳检测
							this.startHeartbeatCheck(ip);
						}
					});

					checkCount++;
					if (checkCount >= maxChecks) {
						clearInterval(this.checkIntervalId);
						this.isConnecting = false;
						this.shouldCheckWifi = false;
						console.log('IP检测超时');
						this.currentConnectionStatus = 0;
						uni.setStorageSync('currentConnectionStatus', 0);
						uni.showToast({
							title: '连接超时，请稍后再试',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							this.toMy();
						}, 2000);
					}
				}, intervalTime);

				this.timeoutId = setTimeout(() => {
					clearInterval(this.checkIntervalId);
					this.isConnecting = false;
					this.shouldCheckWifi = false;
					console.log('IP检测总超时');
					this.currentConnectionStatus = 0;
					uni.setStorageSync('currentConnectionStatus', 0);
					uni.showToast({
						title: '设备未连接，请重试',
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						this.toMy();
					}, 2000);
				}, maxChecks * intervalTime);
			},
			startHeartbeatCheck(ip) {
				if (this.heartbeatInProgress) {
				  console.log('心跳检测已在进行，忽略本次启动');
				  return;
				}
				this.heartbeatInProgress = true;
				let heartbeatCount = 0;
				const maxHeartbeatChecks = 100; // 最多检测50次
				const heartbeatInterval = 100; // 每100ms检测一次

				let hasConnected = false; // <-- 新增标志

				console.log('开始心跳检测...');

				this.heartbeatIntervalId = setInterval(() => {
					if (hasConnected) return; // 已成功就直接不跑
					uni.request({
						url: `http://${ip}/heartbeat`,
						method: 'GET',
						timeout: 3000,
						success: (res) => {
							if (hasConnected) return; // <-- 防止多次处理
							hasConnected = true;      // 第一时间锁住
							console.log('心跳响应:', res);

							const hexStr = res.data?.toUpperCase?.().replace(/\s+/g, '');
							// const hexStr = 'FE5517006400C80033009A99CD41CDCC834201001A0101010158';
							if (!hexStr || !hexStr.startsWith('FE55')) {
								console.warn('心跳数据格式不正确');
								return;
							}

							const body = hexStr.slice(8);
							if (body.length < 26) {
								console.warn('心跳数据长度不足');
								return;
							}

							// 心跳确认成功
							// hasConnected = true; // 标记已连接
							console.log('心跳有效，连接完成！');
							clearInterval(this.heartbeatIntervalId);
							clearTimeout(this.heartbeatTimeoutId);
							this.isConnecting = false;
							this.shouldCheckWifi = false;
							

							// 更新露营车状态
							const campers = uni.getStorageSync('campers') || [];
							const index = campers.findIndex(c => c.wifiName === this.wifiName);
							if (index !== -1) {
								campers[index].wifiStatus = 1;
								uni.setStorageSync('campers', campers);
								this.campers = campers; // 同步更新本地变量
								console.log('已更新wifi状态:', campers[index]);
							}

							uni.setStorageSync('currentIP', ip);
							this.currentConnectionStatus = 1;
							uni.setStorageSync('currentConnectionStatus', 1);
							uni.showToast({
								title: '设备连接成功',
								icon: 'success',
								duration: 2000
							});
							setTimeout(() => {
								this.toMy();
							}, 2000);
						},
						fail: (err) => {
							console.warn('心跳请求失败:', err);
						}
					});

					heartbeatCount++;
					if (heartbeatCount >= maxHeartbeatChecks) {
						if (hasConnected) return; // ✅ 已连接，完全退出
						clearInterval(this.heartbeatIntervalId);
						this.isConnecting = false;
						this.shouldCheckWifi = false;
						console.log('心跳检测超时');
						this.currentConnectionStatus = 0;
						uni.setStorageSync('currentConnectionStatus', 0);
						uni.showToast({
							title: '心跳超时，请重试',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							this.toMy();
						}, 2000);
					}
				}, heartbeatInterval);

				this.heartbeatTimeoutId = setTimeout(() => {
					if (hasConnected) return; // 超时前如果已成功，跳过
					clearInterval(this.heartbeatIntervalId);
					this.isConnecting = false;
					this.shouldCheckWifi = false;
					console.log('心跳检测总超时');
					this.currentConnectionStatus = 0;
					uni.setStorageSync('currentConnectionStatus', 0);
					uni.showToast({
						title: '设备连接超时，请重试',
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						this.toMy();
					}, 2000);
				}, maxHeartbeatChecks * heartbeatInterval);
			},
			// startWifiCheck() {
			// 	// 防止重复定时器
			// 	if (this.checkIntervalId) clearInterval(this.checkIntervalId);
			// 	if (this.timeoutId) clearTimeout(this.timeoutId);
			// 	let checkCount = 0;
			// 	const maxChecks = 10;
			// 	const intervalTime = 2000;
			// 	console.log("获取局域网")
			// 	this.checkIntervalId = setInterval(() => {
			// 		this.getLAN(ip => {
			// 			console.log("hhh");
			// 			if (ip) {
			// 				clearInterval(this.checkIntervalId);
			// 				clearTimeout(this.timeoutId);
			// 				this.isConnecting = false;
			// 				this.shouldCheckWifi = false;
			// 				console.log('设备已连接:', ip);
			// 				uni.setStorageSync('currentIP', ip);

			// 				const campers = uni.getStorageSync('campers') || [];
			// 				const index = campers.findIndex(c => c.wifiName === this.wifiName);
			// 				if (index !== -1) {
			// 					campers[index].wifiStatus = 1;
			// 					uni.setStorageSync('campers', campers);
			// 					this.campers = campers; // 同步更新本地变量
			// 					console.log('已更新wifi状态:', campers[index]);
			// 				}

			// 				this.toMy();
			// 			}
			// 		});
			// 		checkCount++;
			// 		if (checkCount >= maxChecks) {
			// 			clearInterval(this.checkIntervalId);
			// 			this.isConnecting = false;
			// 			this.shouldCheckWifi = false;
			// 			console.log('连接超时');
			// 			// 超时弹窗提示
			// 			uni.showToast({
			// 				title: '连接超时，请稍后再试',
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 			this.toMy();
			// 		}
			// 	}, intervalTime);

			// 	this.timeoutId = setTimeout(() => {
			// 		clearInterval(this.checkIntervalId);
			// 		this.isConnecting = false;
			// 		this.shouldCheckWifi = false;
			// 		console.log('10秒超时处理');
			// 		uni.showToast({
			// 			title: '设备未连接，请重试',
			// 			icon: 'none',
			// 			duration: 2000
			// 		});
			// 		this.toMy();
			// 	}, maxChecks * intervalTime);
			// },
			//获取授权
			async getPermission() {
				var result = await permision.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION")
				var strStatus
				if (result == 1) {
					strStatus = "已获得授权"
				} else if (result == 0) {
					strStatus = "未获得授权"
				} else {
					strStatus = "被永久拒绝权限"
				}
				uni.showModal({
					content: permisionID + strStatus,
					showCancel: false
				});
			},
			// 权限初始化
			init() {
				FvvUniWifiHelper.init(res => {
					console.log(res)
				})
				this.getPermission()
			},
			//获取局域网设备，来判断设备是否连接成功
			getLAN(callback) {
				const port = 80;
				FvvUniWifiHelper.getLAN(port, res => {
					console.log('局域网返回结果:', res.ip);
					if (res && res.ip) {
						callback(res.ip);
					} else {
						callback(null);
					}
				});
			},
			toMy() {
				uni.reLaunch({
					url: '/pages/my/my'
				});
			},
		}
	};
</script>

<style scoped>
	.container {
		padding: 60rpx 30rpx 30rpx 30rpx;
		padding-bottom: 160rpx;
		background: #f5f7fa;
		min-height: 100vh;
		touch-action: none;
		/* 禁止页面拖动 */
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		width: 290rpx;
		height: 76rpx;
	}

	.weather {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		display: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.temp {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* 保证上下垂直居中 */
	}

	.tem-day {
		font-size: 80rpx;
		/* 更大一些的左侧文字 */
		font-weight: bold;
		margin-right: 16rpx;
	}

	.right-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.unit {
		font-size: 26rpx;
		font-weight: bold;
		/* color: #666; */
	}

	.desc {
		font-size: 24rpx;
		font-weight: bold;
		/* color: #999; */
	}

	.section_top {
		/* padding-top: 30rpx; */
	}

	.section {
		margin-top: 50rpx;
	}

	.my_title {
		width: 287rpx;
	}

	.other_title {
		width: 210rpx;
	}

	.section-title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		height: 84rpx;
		background: #697DB6;
		border-radius: 42px;
		color: #fff;
	}

	.card-row {
		display: flex;
		justify-content: space-between;
	}

	.card {
		width: 343rpx;
		height: 258rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		/* 保持为列布局 */
		align-items: flex-start;
		/* 修改为左对齐 */
	}

	.card-img {
		width: 119rpx;
		height: 139rpx;
	}

	.card-row-other {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.card-other {
		width: 48%;
		/* 每行两张图片，每张图片占 48% 的宽度 */
		margin-bottom: 10px;
	}

	.card-other-img {
		width: 100%;
		height: 320rpx;
		border-radius: 10px;
		/* 添加圆角效果 */
	}


	.card-text {
		margin-left: 20rpx;
		/* 添加左边距 */
		margin-top: 15rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
		line-height: 90rpx;
	}

	.sub {
		color: #999;
		font-size: 24rpx;
	}

	.add-card-text {
		display: flex;
		flex-direction: column;
		/* 垂直排列图标和文字 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 258rpx;
		/* 你可以根据需要调整高度 */
		/* border: 1px dashed #ccc; */
		border-radius: 16rpx;
		background-color: #f9f9f9;
	}

	.add-icon-text {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 10rpx;
	}


	.add-card {
		justify-content: center;
	}

	.add-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.more-btn {
		margin-top: 40rpx;
		padding: 20rpx;
		text-align: center;
		background: #e6e6e6;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #333;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		font-size: 26rpx;
	}

	.tab-item.active {
		color: #333;
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 4rpx;
	}

	/* 弹窗样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.info {
		margin-bottom: 20rpx;
	}

	.info text {
		font-size: 28rpx;
	}

	.info-box {
		margin-top: 10rpx;
		background: #f5f5f5;
		padding: 20rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.copy-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.modal-tip {
		font-size: 24rpx;
		color: #666;
		margin-top: 20rpx;
	}

	.modal-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.btn {
		flex: 1;
		margin: 0 10rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.cancel {
		background: #ccc;
		color: #000;
	}

	.confirm {
		background: #2a68ff;
		color: #fff;
	}

	.card-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.card {
		width: 48%;
		margin: 1%;
		box-sizing: border-box;
	}

	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
	}

	.spinner {
		width: 60rpx;
		height: 60rpx;
		border: 6rpx solid #fff;
		border-top: 6rpx solid transparent;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
	}
</style>